<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>编辑货架</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div ref="tops">
                <div class="cell_box">
                    <div class="cell_name">仓库名称</div>
                    <div class="cell_cont">{{ckName}}</div>
                </div>
                <div class="title_box">
                    <div class="title_name">货架明细:</div>
                    <div class="title_but">
                        <el-button class="border_but" @click="hjAdd" type="primary">新增</el-button>
                    </div>
                </div>
            </div>
            <div class="detail_box" ref="detailbox">
                <div class="table_box border_table_box">
                    <el-table :data="hjList" height="100%" border style="width: 100%">
                        <el-table-column align="center" prop="indexId" width="84" show-overflow-tooltip label="序号">
                        </el-table-column>
                        <el-table-column align="center" prop="number" min-width="120" show-overflow-tooltip
                                         label="货架编号">
                            <template slot-scope="scope">
                                <div class="table_input">

                                    <el-input placeholder="请输入" @change="tableInput(scope.row)"
                                              v-model="scope.row.number" clearable></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" align="center" width="100" show-overflow-tooltip label="货架二维码">
                            <template slot-scope="scope">
                                <el-button @click="checkQrcode(scope.row)" v-if="scope.row.isqrcode == 1"
                                           class="border_but" style="height: 24px;margin: 0 auto;" type="primary">
                                    查看
                                </el-button>
                                <!-- <el-button @click="bindingQrcode(scope.$index)" v-if="scope.row.isqrcode == 0"
                                           class="border_but" style="height: 24px;margin: 0 auto;" type="primary">
                                    绑定
                                </el-button> -->
                            </template>
                        </el-table-column>

                        <el-table-column prop="materialInfos" align="center" min-width="108" show-overflow-tooltip
                                         label="当前存放材料">
                            <!-- <template slot-scope="scope">
                                    <el-button v-if="scope.row.mid.length == 0" @click="chioseCl(scope.row, scope.$index)" class="border_but" style="height: 24px;margin: 0 auto;" type="primary">选择</el-button>
                                    <span v-if="scope.row.mid.length > 0">{{scope.row.materialname}} <span v-if="scope.row.msid.length > 0">({{scope.row.specificationname}})</span></span>
                                </template> -->
                        </el-table-column>

                        <el-table-column prop="creatername" align="center" show-overflow-tooltip label="创建人"
                                         min-width="70">
                        </el-table-column>

                        <el-table-column prop="addtime" align="center" show-overflow-tooltip label="创建时间" width="160">
                        </el-table-column>

                        <el-table-column prop="address" align="center" show-overflow-tooltip label="操作" width="80">
                            <template slot-scope="scope">
                                <el-button @click="hjRemove(scope.$index,scope.row)"
                                           v-if="scope.row.isqrcode == 0 &&  (!scope.row.mid || scope.row.mid.length == 0)"
                                           type="text">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button @click="cancels" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
        <div class="qrcode_mask" @click="qrcodeclose">
            <div class="qrcode_popup" @click.stop>
                <div class="qrcode_title" @click.stop>
                    <div>{{qrcodeTitle}}</div>
                </div>
                <div class="qrcode_close" @click="qrcodeclose">
                    <div class="el-icon-close"></div>
                </div>
                <div class="qrcode_box" @click.stop>
                    <div class="qrcode_img" id="qrcode"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/qrcode.min.js"></script>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    qrcodeTitle: '',
                    projectId: '',
                    ckName: '',
                    storageId: '',
                    hjList: [],
                    dialogVisible: true,
                    qrcode: ''
                };
            },
            methods: {
                tableInput(row) {
                    for (var i = 0; i < this.hjList.length; i++) {
                        if (row.indexId != this.hjList[i].indexId && row.number.length > 0 && row.number == this.hjList[i].number) {
                            row.number = ''
                            this.$message({
                                message: '货架编号不可重复',
                                type: 'warning',
                                duration: 1000
                            });
                        }
                    }
                    if (!row.isAdd) {
                        row.oper = 'update'
                    }
                },
                qrcodeclose(e) {
                    var that = this
                    $('.qrcode_mask').fadeOut("slow");
                    that.qrcode.clear();
                    $('.qrcode_img').html('')
                },
                // 查看二维码
                checkQrcode(qrcodeNum) {
                    var that = this
                    $('.qrcode_mask').fadeIn("slow");
                    this.qrcodeTitle = qrcodeNum.indexId + '货架二维码'
                    setTimeout(function () {
                        that.qrcode = new QRCode("qrcode", {
                            text: qrcodeNum.qrcode,
                            width: $('.qrcode_img').width(),
                            height: $('.qrcode_img').height(),
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });
                    }, 100);
                },
                // 选择材料
                chioseCl(row, index) {
                    var that = this
                    parent.$('#publicValue').val('')
                    parent.layer.open({
                        type: 2,
                        title: '选择材料和规格',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['52.08%', '64.81%'],
                        // area: ['91.91%', '72.16%'],
                            content: '/ApsPublic/publicList/clmxList.html?isSingle=1&projectId=' +  that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var newList = JSON.parse(parent.$('#publicValue').val())
                                    row.mid = newList[0].materialId > 0 ? newList[0].materialId + '' : ''
                                    row.msid = newList[0].specificationId > 0 ? newList[0].specificationId + '' : ''
                                    row.materialname = newList[0].materialName
                                    row.specificationname = newList[0].specificationName
                                    if (!row.isAdd) {
                                        row.oper = 'update'
                                    }
                                    that.$set(that.hjList, index, row)
                                }
                            }, 10)
                        }
                    });
                },
                // 绑定二维码
                bindingQrcode(index) {
                    var that = this
                    var selectArr = []
                    parent.$('#publicValue').val('')
                    for (var i = 0; i < this.hjList.length; i++) {
                        if (this.hjList[i].isqrcode == 1) {
                            selectArr.push({
                                qrcode: this.hjList[i].qrcode
                            })
                        }
                    }
                    parent.layer.open({
                        type: 2,
                        title: '绑定二维码',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        // area: ['56.7%', '89.8%'],
                        area: ['53.12%', '51.38%'],
                            content: '/ApsPublic/publicList/qrcodelist.html?qrcodeType=2&projectId=' + that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var newList = JSON.parse(parent.$('#publicValue').val())
                                    that.hjList[index].isqrcode = 1
                                    that.hjList[index].qrcode = newList.code
                                    if (!that.hjList[index].isAdd) {
                                        that.hjList[index].oper = 'update'
                                    }
                                }
                            }, 10)
                        }
                    });
                },
                // 新增货架
                hjAdd() {
                    var that = this
                    var indexId = ''
                    var hjList = JSON.parse(JSON.stringify(this.hjList))
                    if (hjList.length == 0) {
                        indexId = '001'
                    } else {
                        var num = parseInt(hjList[hjList.length - 1].indexId) + 1
                        if (num > 99) {
                            indexId = num
                        } else if (num > 9) {
                            indexId = '0' + num
                        } else {
                            indexId = '00' + num
                        }
                    }
                    that.hjList.push({
                        isAdd: true,
                        oper: 'add',
                        id: '',
                        msid: '',
                        mid: '',
                        isqrcode: 0,
                        qrcode: '',
                        createcode: '',
                        createname: '',
                        addtime: timeFormat(new Date(), 1),
                        materialname: '',
                        specificationname: '',
                        indexId: indexId,
                        number: ''
                    })
                },
                // 获取货架数据
                getHjData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetGoodsShelvesByStorage',
                        data: {
                            storageId: that.storageId
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            for (var i = 0; i < res.data.length; i++) {
                                if (i > 98) {
                                    res.data[i]['indexId'] = (i + 1)
                                } else if (i > 8) {
                                    res.data[i]['indexId'] = '0' + (i + 1)
                                } else {
                                    res.data[i]['indexId'] = '00' + (i + 1)
                                }
                            }
                            that.hjList = res.data
                        }
                    });
                },
                // 删除货架
                hjRemove(index, item) {
                    var that = this
                    this.$confirm('是否删除该货架?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        if (item.isAdd) {
                            that.hjList.splice(index, 1);
                            return
                        }
                        // 进行请求判断 这个仓库是否删
                        xLoading(true, '正在提交')
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/CheckDeleteGoodsShelevs',
                            data: {
                                storageId: that.storageId,
                                projectId: that.projectId,
                                goodsShelvesId: item.id
                            },
                            dataType: 'json',
                            success: function (res) {
                                xLoading(false)
                                if (!res.Success) {
                                    that.$message({
                                        message: res.Msg ? res.Msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.hjList.splice(index, 1)

                            }
                        });
                    }).catch(function () {
                    });
                },
                // 取消
                cancels() {
                    var that = this
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                // 提交 解决货架被删完之后也需要提交更新
                confirms() {
                    var that = this
                    var dataJson = that.hjList
                    // if (dataJson.length == 0) {
                    //     var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    //     parent.layer.close(index);
                    //     return false
                    // }
                    if (dataJson.length > 0) {
                        for (var j = 0; j < dataJson.length; j++) {
                            if (dataJson[j].number.length == 0) {
                                this.$message({
                                    message: '请输入货架编号',
                                    type: 'warning',
                                    duration: 1000
                                });
                                return false
                            }
                        }
                    }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GoodsShelvesDataManage',
                        data: {
                            storageId: that.storageId,
                            dataJson: JSON.stringify(dataJson)
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                },
            },
            mounted() {
                var that = this
                this.showApp = true;
                setTimeout(function () {
                    that.$refs.detailbox.style.height = 'calc(100% - ' + that.$refs.tops.offsetHeight + 'px)'
                }, 100)
                this.projectId = getQuerys('projectId')
                this.ckName = decodeURIComponent(getQuerys('ckName'))
                this.storageId = getQuerys('storageId')
                this.getHjData()
                // getQuerys()
            }
        });
    </script>
</body>
<style>
    .content_box {
        padding: 2.77vh 2.08vw 4px;
        height: calc(100% - 70px);
    }

    .but_box {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        align-items: flex-end;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
    }

        .but_box .el-button {
            width: 120px;
            height: 32px;
            border-radius: 5px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .title_but {
        padding-left: 10px;
    }

    .cell_txt {
        color: #000000;
        font-weight: bold;
        line-height: 1;
    }

        .cell_txt span {
            padding-left: 10px;
        }

    .cell_box {
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .cell_cont {
        margin-left: 10px;
        min-width: 280px;
        height: 32px;
        background: #E3E3E3;
        border: 1px solid #BBBBC5;
        border-radius: 5px;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .title_box {
        display: flex;
        align-items: center;
        margin-top: 2.77vh;
        padding-bottom: 10px;
    }

    .detail_box {
        border: 1px solid #EBEBEB;
        padding: 2.77vh 2.08vw 10px;
    }

    .table_box {
        height: 100%;
    }

    .qrcode_mask {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99999;
        display: none;
    }

    .qrcode_popup {
        background: #ffffff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 6.66vh 4.36vw;
    }

    .qrcode_title {
        width: 31.65vw;
        padding: 0 0 20px;
    }

    .qrcode_close {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 24px;
        cursor: pointer;
    }

    .qrcode_title div {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .qrcode_box {
        width: 31.65vw;
        height: 31.65vw;
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.35);
        border-radius: 10px;
        padding: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qrcode_img {
        width: 100%;
        height: 100%;
    }

    .table_input .el-input__inner {
        height: 24px;
        text-align: center;
        border: none;
        border: 1px solid #BBBBC5;
        line-height: 24px;
    }

    .table_input .el-input__prefix,
    .table_input .el-input__suffix {
        line-height: 24px;
    }

    .table_input .el-input__icon {
        line-height: 24px;
    }
</style>

</html>